<template>
	<router-view v-slot="{ Component }">
		<transition :name="store.getters.transition">
			<component :is="Component" />
		</transition>
	</router-view>
</template>

<script>
	import { useStore } from "vuex";
	
	export default {
		props:{},
		setup (props, { emit }) {
			const store = useStore();
			
			return {
				store
			}
		}
	}
</script>

<style lang="scss">
	@import "~@/styles/transition.scss";
	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		color: #2c3e50;
		// -webkit-overflow-scrolling:touch;
	}
	
	$vw_base: 375;
	$vw_fontsize: 20;
	html {
		font-size: 20px; //不支持vw单位时，回退到px单位
		-ms-text-size-adjust: 100%;
	    -webkit-text-size-adjust: 100%;
	    -moz-text-size-adjust: 100%;
	    text-size-adjust: 100%;
		font-size: ($vw_fontsize / $vw_base) * 100vw;
	}
	
	@media screen and (orientation: landscape) {
	  html {
	    font-size: 20px;
	    font-size: ($vw_fontsize / $vw_base) * 100vh;
	  }
	}
</style>
